<template>
  <el-cascader
    ref="cascaderRef"
    v-model="selectSpuTypeId"
    :options="spuTypeList"
    :props="{ ...defaultProps, multiple: true }"
    collapse-tags
    collapse-tags-tooltip
    clearable
    class="w-100%!"
    placeholder="请选择商品类型"
    @change="onChange"
  />
</template>
<script lang="ts" setup>
import { defaultProps } from '@/utils/tree'
import { oneOfType } from 'vue-types'
import { propTypes } from '@/utils/propTypes'
/** spuType */
import { useSpuType } from '@/hooks/web/useSpuType'
const { spuTypeOptions } = useSpuType()
/** 商品分类选择组件 */
defineOptions({ name: 'ProductSpuTypeSelect' })

const props = defineProps({
  // 选中的ID
  modelValue: oneOfType<number | number[]>([Number, Array<Number>]),
  // 是否多选
  multiple: propTypes.bool.def(false),
  // 上级品类的编号
  parentId: propTypes.number.def(undefined),
  // 隐藏的分类类型
  hideSpuType: propTypes.array.def([])
})

/** 选中的分类 ID */
const selectSpuTypeId = computed({
  get: () => {
    return props.modelValue
  },
  set: (val: number | number[]) => {
    emit('update:modelValue', val)
  }
})

const spuTypeList = computed(() => {
  let list = [] as EmptyArrayType
  list = spuTypeOptions.filter((ele) => {
    return !props.hideSpuType.includes(ele.id)
  })
  return list
})
/** 监听变化 */
const cascaderRef = ref()
const getCheckedNodes = () => {
  let panelList = cascaderRef.value.getCheckedNodes()
  return panelList
} //获取面板值
defineExpose({ getCheckedNodes })
const onChange = (e) => {
  emit('change', e)
}

/** 分类选择 */
const emit = defineEmits(['update:modelValue', 'change'])
</script>
